<template>
  <div>
    <el-dialog title="捐款详情" top="5vh" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" @open="open()">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" v-loading="dialogLoading">
        <el-form-item label="联系人：" prop="type">{{details.contact_person}}</el-form-item>
        <el-form-item label="联系电话：" prop="type">{{details.contact_phone}}</el-form-item>
        <el-form-item label="公司名称：" prop="type">{{details.company_name}}</el-form-item>
        <el-form-item label="捐款意向：" prop="type">
          {{details.is_donation?'捐款':""}}
          <span v-if="details.is_donation&&details.is_offering">|</span>
          {{details.is_offering?'捐物':""}}
        </el-form-item>
        <el-form-item label="意向金额：" prop="type">{{details.interest_amount}}</el-form-item>
        <el-form-item label="意向物品：" prop="type">{{details.item_name}}</el-form-item>
        <el-form-item label="状态：" prop="type">
          <el-tag v-if="details.status===0">待服务</el-tag>
          <el-tag v-if="details.status===1" type="success">已捐</el-tag>
          <el-tag v-if="details.status===2" type="danger">未捐</el-tag>
        </el-form-item>
        <el-form-item label="提交时间：" prop="type">{{details.apply_time}}</el-form-item>
        <h6 style="marginLeft:50px">实际捐款情况</h6>
        <div v-if="details.status===0">
          <el-form-item label="捐款状态：" prop="status">
            <el-radio v-model="form.status" :label="1">已捐款</el-radio>
            <el-radio v-model="form.status" :label="2">未捐款</el-radio>
          </el-form-item>
          <div v-if="form.status===1">
            <el-form-item label="实际捐款：" v-if="details.is_donation" prop="fact_interest_amount">
              <el-input-number v-model="form.fact_interest_amount" :precision="2" controls-position="right" size="small" :min="1"></el-input-number> 元
            </el-form-item>
            <el-form-item label="实际捐物：" v-if="details.is_offering" prop="fact_item_name">
              <el-input style="width:300px" maxlength="100" v-model="form.fact_item_name" placeholder="请输入实际捐物"></el-input>
              价值
              <el-input-number v-model="form.fact_item_amount" :precision="2" controls-position="right" size="small" :min="0"></el-input-number> 元
            </el-form-item>
          </div>

          <el-form-item label="未捐原由：" prop="type" v-if="form.status===2">
            <el-input style="width:500px" type="textarea" :rows="2" maxlength="200" show-word-limit v-model="form.no_donation_remark" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="实际捐款：" prop="type" v-if="details.status==1&&details.is_donation">{{details.fact_interest_amount||0}}元</el-form-item>
          <el-form-item label="实际捐物：" prop="type" v-if="details.status==1&&details.is_offering">{{details.fact_item_name}}，价值{{details.fact_item_amount}}元</el-form-item>
          <el-form-item label="未捐原由：" prop="type" v-if="details.status==2">{{details.no_donation_remark}}</el-form-item>
          <el-form-item label="平台已发放积分：" prop="type" v-if="details.status==1">{{details.give_point}}</el-form-item>
          <el-form-item label="操作时间：" prop="type">{{details.audit_time}}</el-form-item>
          <el-form-item label="操作人：" prop="type">{{details.audit_admin}}</el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" v-if="details.status===0" :loading="btnLoading" @click="check()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import donationApi from '@/api/donationApi.js'
export default {
  data () {
    return {
      dialogLoading: false,
      details: {},
      form: {},
      btnLoading: false,
      rules: {
        status: [
          { required: true, message: '请选择捐款状态', trigger: 'change' },
        ],
        fact_interest_amount: [
          { required: true, message: '请输入实际捐款', trigger: 'blur' },
        ],
        fact_item_name: [
          { required: true, message: '请输入实际捐物', trigger: 'blur' },
        ],
        integral_type: [
          { required: true, message: '选择积分发放规则', trigger: 'blur' },
        ],
      },
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number | String
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit("update:show", val)
      }
    }
  },
  methods: {
    handleClose () {
      this.$refs.form.resetFields();
      this.form = {};
      this.details = {};
      this.dialogVisible = false
    },
    open () {
      this.getDetails()
    },
    getDetails () {
      this.dialogLoading = true
      donationApi.donationInfo(this.id).then(res => {
        if (res && res.data.code == 200) {
          this.details = res.data.data
        }
        this.dialogLoading = false
      })
    },
    check () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.status == 1 && this.details.is_offering && (!this.form.fact_item_name || !this.form.fact_item_amount)) {
            this.$message.error('请完成实际捐物信息输入！');
            return false
          } else if (this.form.status == 1 && this.details.is_donation && !this.form.fact_interest_amount) {
            this.$message.error('请输入实际捐款！');
            return false
          }
          this.form.id = this.id;
          this.btnLoading = true;
          donationApi.donationAudit(this.form).then(res => {
            this.btnLoading = false;
            if (res && res.data.code == 200) {
              this.$message.success('审核成功！');
              this.handleClose()
              this.$emit('change')
            }
          })
        }
      });

    }
  }
}
</script>

<style>
</style>